<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style type="text/css">
        .box {
            color: red;
        }

        .test_setstyle {
            background-color: #0c80dc;
        }

        .change_setstyle {
            background-color: #03b3ad;
        }
	</style>
</head>
<body>
	<script src="js/jquery-3.6.0.js"></script>
<ul data-v-559c3ed2="" id="htmllesson">
	<li data-v-559c3ed2="" class="chapter">
		<div data-v-559c3ed2="" class="chapter-title">第1章&nbsp;&nbsp;HTML</div>
		<ul data-v-559c3ed2="">
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.1 导学视频</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">34:21</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.2 HTML的历史发展过程</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:31</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.3 搞懂HTML是什么</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:12</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.4 sublimeText的安装和使用</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:35</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.5 HTML的常用标签介绍和文档结构</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">10:19</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.6 学习p标签,为你的文章添加段落</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:33</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.7 学习strong和em加入强调语气</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:07</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.8 学习br标签,为你的内容添加换行</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:07</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.9 HTML的特殊符号</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:21</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.10 学习HX系列标题,为你的网页添加标题、</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:06</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.11 学习hr标签为你的段落之间添加分割线</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">02:26</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.12 学习ul标签为你的网页添加新闻列表</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:05</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.13 学习ol为网页添加热门点击排行榜</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:16</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.14 学习dl为你的网页添加无序列表</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:44</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.15 table标签的介绍和使用</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">09:19</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.16 简单的css样式为表格添加边框</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:42</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.17 学习caption为表格添加标题</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">02:07</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.18 表格的横向合并和纵向合并使用</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:56</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.19 学习a标签为你的网页添加超链接</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:25</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.20 在新的浏览器窗口打开新的链接</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">02:34</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.21 标签在当前网页上进行跳转</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">07:22</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.22 为你的爱人发送一封邮件</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">01:49</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.23 img标签为你的网页添加绚丽的图片</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">04:16</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.24 img标签src属性的路径问题</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:46</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.25 img标签的属性讲解</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:49</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.26 表单控件input的使用</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:37</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.27 将网页的数据提交到服务器</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:56</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.28 单选框实现性别选择</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:13</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.29 复选框购买你想要的课程</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:34</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.30 下拉列表实现单选</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:00</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.31 下拉列表实现多选</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">02:57</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.32 让你的文本输入框支持多行输入</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">04:51</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.33 form表单中的按钮和普通按钮</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:12</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.34 label标签的应用</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:30</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.35 div标签的介绍</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">04:27</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.36 小米官网和京东网站划分结构</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">09:17</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">1.37 对小米网站的整站分析</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">14:43</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
		</ul>
	</li>
	<li data-v-559c3ed2="" class="chapter">
		<div data-v-559c3ed2="" class="chapter-title">第2章&nbsp;&nbsp;CSS</div>
		<ul data-v-559c3ed2="">
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.1 CSS的介绍</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">10:15</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.2 3分钟快速认识css</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:43</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.3 使用css的优势</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">04:57</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.4 css语法和注释规则</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">04:15</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.5 css的三种引入方式</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:38</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.6 三种引入方式的优缺点</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:18</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.7 三种引入方式的优先级</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">04:45</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.8 css的常用选择器介绍</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">04:24</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.9 css选择器之标签选择器</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">07:36</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.10 css选择器之ID选择器</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:52</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.11 css选择器之类选择器</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:00</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.12 如何正确的玩好类选择器</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:55</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.13 css选择器之后代选择器</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:03</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.14 css选择器之子代选择器</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:30</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.15 css选择器之组合选择器</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">02:43</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.16 css选择器之交集选择器</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:12</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.17 css选择器之伪类选择器</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">10:48</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.18 css选择器总结</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:03</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.19 css的继承性</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:32</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.20 css选择器权重</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:56</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.21 css选择器权重深入</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">09:21</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.22 !important的讲解</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">04:48</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.23 字体属性之font-family</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:49</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.24 字体属性之font-size</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:05</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.25 字体属性之color</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">09:18</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.26 字体属性之font-style</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">01:07</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.27 字体属性之font-weight</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:45</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.28 文本属性之text-decoration</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:01</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.29 制作淘宝满减女装示例效果</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:28</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.30 文本属性之text-indent</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:51</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.31 文本属性之行高</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">07:24</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.32 文本属性之text-align</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">02:45</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.33 字体属性和文本属性总结</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">13:03</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.34 元素分类和display属性介绍</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:42</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.35 块级元素特点</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:13</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.36 行内元素和行内块元素特点</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:36</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.37 display属性讲解</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">10:53</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.38 小米顶部栏案例</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">10:14</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.39 盒子模型介绍</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:03</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.40 盒子模型的属性介绍</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:36</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.41 padding属性讲解</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:16</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.42 border属性讲解</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">13:54</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.43 margin属性讲解</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">09:23</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.44 清除某些HTML元素的默认样式</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">09:41</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.45 HTML盒子居中显示</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">07:12</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.46 浮动的介绍</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:17</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.47 了解网页中的文字环绕现象</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:47</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.48 浮动元素的现象</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:05</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.49 浮动元素的破坏性</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:40</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.50 清除浮动方式(固定高度和内墙法)</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:12</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.51 清除浮动的方式之伪元素清除法</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">04:58</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.52 清除浮动方式之overflow</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">07:44</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.53 深入挖掘BFC到底是什么鬼</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">12:13</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.54 小米导航栏制作</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">25:58</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.55 定位的介绍</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">04:26</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.56 相对定位讲解</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:31</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.57 绝对定位讲解</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">17:45</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.58 小米搜索实战应用</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:30</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.59 固定定位讲解</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">07:50</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.60 小米固定侧方栏案例讲解</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">09:33</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.61 浮动和定位对行内元素的影响</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">04:47</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.62 z-index的讲解</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:09</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.63 z-index属性深入挖掘</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:07</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.64 css的背景属性讲解</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:44</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.65 背景定位属性值详讲</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:57</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.66 MIUI背景图实战应用案例</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">04:54</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.67 CSS Sprite雪碧图技术</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:38</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.68 CSS Spriter雪碧图技术实现原理</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:32</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.69 如何快速的让背景图缩放比例</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:54</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.70 淘宝列表导航案例制作</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">13:37</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.71 如何制作圆、圆环以及半圆</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:36</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.72 使网页中的元素产生阴影的效果</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">13:31</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.73 网页常见布局方案-单列布局</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:44</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.74 网页常见布局方案-多列布局</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:32</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.75 网页中常见问题介绍</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:16</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.76 行内元素水平垂直居中</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:05</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.77 块级元素水平垂直居中方法一</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:26</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.78 块级元素水平垂直居中方法二</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:02</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">2.79 块级元素水平垂直居中方法三</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:13</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
		</ul>
	</li>
	<li data-v-559c3ed2="" class="chapter">
		<div data-v-559c3ed2="" class="chapter-title">第3章&nbsp;&nbsp;小米商城实战项目</div>
		<ul data-v-559c3ed2="">
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">3.1 小米商城介绍和结构分析</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">10:54</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class=""></p></div>
						<h5 data-v-559c3ed2="" class="section-number">3.2 小米顶部栏结构搭建</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">09:54</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class=""></p></div>
						<h5 data-v-559c3ed2="" class="section-number">3.3 小米顶部栏样式实现</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">12:43</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">3.4 小米导航栏结构搭建</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:07</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">3.5 小米导航栏样式实现</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">24:00</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">3.6 小米轮播图和侧边栏实现</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">10:22</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">3.7 小米侧边栏样式实现</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">10:22</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">3.8 小米轮播图下一张和上一张实现</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">18:51</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">3.9 小米向导内容结构搭建</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:28</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">3.10 iconfont阿里巴巴矢量图标库的使用</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">12:55</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">3.11 小米向导列表实现</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">13:10</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class=""></p></div>
						<h5 data-v-559c3ed2="" class="section-number">3.12 小米中心banner图实现</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:03</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class=""></p></div>
						<h5 data-v-559c3ed2="" class="section-number">3.13 小米内容详情结构搭建</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">10:16</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class=""></p></div>
						<h5 data-v-559c3ed2="" class="section-number">3.14 小米内容详情样式实现</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">25:59</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class=""></p></div>
						<h5 data-v-559c3ed2="" class="section-number">3.15 小米脚部区域结构搭建</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:43</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class=""></p></div>
						<h5 data-v-559c3ed2="" class="section-number">3.16 小米脚部区域样式实现</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">17:33</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class=""></p></div>
						<h5 data-v-559c3ed2="" class="section-number">3.17 小米商城项目总结经验</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:15</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
		</ul>
	</li>
	<li data-v-559c3ed2="" class="chapter">
		<div data-v-559c3ed2="" class="chapter-title">第4章&nbsp;&nbsp;JavaScript基础</div>
		<ul data-v-559c3ed2="">
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.1 JavaScript介绍</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">14:34</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.2 如何在页面中插入Javascript</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:16</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.3 变量</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">10:21</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.4 基本的变量类型的介绍</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">13:11</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.5 算数运算符</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">09:01</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.6 赋值运算符</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:28</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.7 字符串</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">11:33</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.8 数值和字符串转换</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:59</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.9 JavaScript中强大的数组Array</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">13:01</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.10 人生的选择</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">20:45</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.11 为赢取白富美做出选择--条件判断</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:25</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.12 if...else语句</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">07:48</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.13 比较运算符</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:40</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.14 逻辑运算符</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">10:43</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.15 switch语句</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:32</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.16 三元运算符</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">04:28</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.17 for循环介绍和应用</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">14:09</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.18 个人对996的看法</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">16:26</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.19 break和continue语句</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:09</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.20 while循环</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:29</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.21 do-while循环</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:24</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.22 函数的定义</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:41</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.23 函数传参</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:26</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.24 函数返回值和函数表达式</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:47</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.25 函数作用域和全局污染</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">12:42</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.26 对象object讲解</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">09:08</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.27 内置对象Array</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">10:43</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.28 数组的join()方法</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:35</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.29 数组的栈方法和队列方法</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:57</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.30 数组排序</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">11:39</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.31 数组的操作方法</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">14:35</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.32 数组的位置方法</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:20</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.33 数组的迭代方法</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:22</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.34 map方法的应用</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:57</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.35 字符串的字符方法</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:01</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.36 字符串的切片方法</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:57</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.37 字符串其它的方法</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:17</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.38 如何查找当前字符的所有位置</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">04:46</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.39 Date日期对象的创建方式</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:32</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.40 Date的常用方法</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:14</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.41 日期格式化方法</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">04:34</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.42 如何显示数字时钟的格式时间</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">12:07</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.43 字符串和数值类型相互转换</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">09:22</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.44 global对象的编码和解码方法</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">09:53</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.45 window对象讲解</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">02:25</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.46 Math数学对象</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">13:21</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class=""></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.47 获取某个范围的随机整数</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">04:32</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.48 如何来获取随机颜色</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:06</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.49 如何获取随机验证吗</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:49</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">4.50 作为面试官对目前开发人员的看法</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">17:25</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
		</ul>
	</li>
	<li data-v-559c3ed2="" class="chapter">
		<div data-v-559c3ed2="" class="chapter-title">第5章&nbsp;&nbsp;BOM</div>
		<ul data-v-559c3ed2="">
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">5.1 BOM对象介绍</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:55</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">5.2 window对象的alert,confirm,prompt方法</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">04:43</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">5.3 定时器方法</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">07:22</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">5.4 location对象的常用属性介绍</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">04:39</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">5.5 如何访问每个查询字符串参数</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">11:07</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">5.6 当前浏览器的位置操作</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">04:40</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">5.7 如何检测当前浏览器上的插件</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:38</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">5.8 history对象的介绍</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:28</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
		</ul>
	</li>
	<li data-v-559c3ed2="" class="chapter">
		<div data-v-559c3ed2="" class="chapter-title">第6章&nbsp;&nbsp;DOM</div>
		<ul data-v-559c3ed2="">
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">6.1 快速认识DOM</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">15:09</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">6.2 DOM中节点中分类</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:36</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">6.3 获取元素节点对象的方式</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">09:58</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">6.4 setAttribute()和getAttribute()用法</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:02</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">6.5 节点对象的三个重要属性介绍</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">11:10</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">6.6 节点对象的常用属性</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:28</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">6.7 节点对象属性在各浏览器兼容性处理</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">09:39</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">6.8 元素节点对象的增删改查方法</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">13:28</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">6.9 样式设置</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:48</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">6.10 事件介绍和onclick事件</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">13:55</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">6.11 鼠标悬浮事件</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:18</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">6.12 光标聚焦和失焦事件</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:42</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section active">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played play"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">6.13 表单控件上内容选中和改变事件</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:47</span> <img
							data-v-559c3ed2=""
							src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
							class="play1"> <img data-v-559c3ed2=""
												src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">6.14 窗口加载事件</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:01</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
		</ul>
	</li>
	<li data-v-559c3ed2="" class="chapter">
		<div data-v-559c3ed2="" class="chapter-title">第7章&nbsp;&nbsp;JS特效</div>
		<ul data-v-559c3ed2="">
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">7.1 JS特效案例介绍</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:24</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">7.2 前女友们的图片切换</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">10:52</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">7.3 显示和隐藏图片</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:10</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">7.4 衣服相册切换效果</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">15:55</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">7.5 关闭小广告</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:33</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">7.6 初学者小白实现图片切换</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:12</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">7.7 封装图片切换代码</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">07:09</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">7.8 图片切换完整版</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:23</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">7.9 百度换肤</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">11:16</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">7.10 千千音乐盒实现全选和反选</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">11:23</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">7.11 表单验证</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">19:57</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class=""></p></div>
						<h5 data-v-559c3ed2="" class="section-number">7.12 上传图片验证</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">12:19</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class=""></p></div>
						<h5 data-v-559c3ed2="" class="section-number">7.13 随机验证码校验</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">10:21</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class=""></p></div>
						<h5 data-v-559c3ed2="" class="section-number">7.14 发布评论</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">17:38</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class=""></p></div>
						<h5 data-v-559c3ed2="" class="section-number">7.15 九宫格布局</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">15:31</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class=""></p></div>
						<h5 data-v-559c3ed2="" class="section-number">7.16 九宫格布局定位实现</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">09:25</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class=""></p></div>
						<h5 data-v-559c3ed2="" class="section-number">7.17 日期特效</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">09:43</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class=""></p></div>
						<h5 data-v-559c3ed2="" class="section-number">7.18 定时器的回顾</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">07:22</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class=""></p></div>
						<h5 data-v-559c3ed2="" class="section-number">7.19 transform的应用</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:23</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class=""></p></div>
						<h5 data-v-559c3ed2="" class="section-number">7.20 数字时钟案例</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">11:20</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class=""></p></div>
						<h5 data-v-559c3ed2="" class="section-number">7.21 长图滚动案例</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">13:48</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
		</ul>
	</li>
	<li data-v-559c3ed2="" class="chapter">
		<div data-v-559c3ed2="" class="chapter-title">第8章&nbsp;&nbsp;Jquery开发&amp;BootStrap</div>
		<ul data-v-559c3ed2="">
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.1 jQuery知识点介绍</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">07:03</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.2 基础核心使用</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">20:47</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.3 入口函数</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">07:47</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.4 如何处理多个库$冲突的问题</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:50</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.5 基础和层级选择器</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">10:12</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.6 过滤选择器和属性选择器</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">19:06</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.7 DOM操作之插入节点</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">12:58</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.8 DOM操作之删除节点</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">07:37</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.9 DOM操作之克隆节点</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:10</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.10 DOM操作之替换节点和包裹节点</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">07:35</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.11 属性操作</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:53</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.12 类操作</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">07:35</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.13 值操作</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">13:22</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.14 筛选的方法</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:40</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.15 siblings方法的运用</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:09</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.16 css的DOM方法</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">14:47</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.17 宽高设置和获取</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">04:45</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.18 鼠标事件一</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">11:45</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.19 鼠标事件二</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">10:21</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.20 鼠标事件三</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:31</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.21 表单事件</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">10:53</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.22 冒泡应用(百度换肤)</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">22:24</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.23 事件代理</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">09:23</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class=""></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.24 合成事件</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:49</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class=""></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.25 动画效果</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">14:16</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.26 如何与后端发生交互(ajax技术)</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">20:03</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.27 案例-百度天气实现实况天气</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">16:05</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.28 案例-百度天气实现未来三天天气</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">20:32</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.29 案例todoList-加载初始数据</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">17:57</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class=""></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.30 案例todoList-添加数据</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:40</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class=""></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.31 案例todoList-删除数据</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:08</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class=""></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.32 案例todoList-添加已经完成选项</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:30</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class=""></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.33 案例todoList-编辑操作</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:48</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class=""></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.34 案例todoList-如何做数据的持久化</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">11:30</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.35 响应式介绍</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">10:26</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.36 @media媒体查询</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:22</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.37 Bootstrap介绍</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">06:24</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.38 Bootstrap的下载和基本使用</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">16:11</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.39 Bootstrap的布局容器</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">05:11</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.40 Bootstrap的栅格系统</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">15:42</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.41 Bootstrap栅格的实现原理</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">04:56</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.42 Bootstrap的列偏移</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">03:22</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.43 Bootstrap的排版</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:12</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.44 Bootstrap的表格</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">09:33</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.45 Bootstrap的表单</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">13:12</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.46 全局CSS样式</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">09:38</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.47 导航条</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">15:00</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.48 面板和下拉菜单</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:03</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.49 按钮组和按钮式的下拉菜单</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">07:24</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.50 分页、路径导航、徽章</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">08:01</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.51 警告框和进度条</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">12:24</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.52 Bootstrap的插件</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">15:50</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
			<li data-v-559c3ed2="">
				<div data-v-559c3ed2="" class="section unactive">
					<section data-v-559c3ed2="">
						<div data-v-559c3ed2="" class="status"><p data-v-559c3ed2="" class="played"></p></div>
						<h5 data-v-559c3ed2="" class="section-number">8.53 个人经历分享</h5></section>
					<section data-v-559c3ed2=""><span data-v-559c3ed2="" class="section-time">17:02</span>
						<img data-v-559c3ed2=""
							 src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
							 class="play2"> <img data-v-559c3ed2=""
												 src="//hcdn2.luffycity.com/media/frontend/activity/play2_1564141051.3371863.svg"
												 class="play3"></section>
				</div>
			</li>
		</ul>
	</li>
</ul>
<div id="test"></div>
<script>

    var htmllesson = document.getElementById("htmllesson")
    console.log(htmllesson)
    // var tagslesson = document.getElementsByTagName('ul')
    // console.log(tagslesson)
    // for (var i = 0; i < tagslesson.length; i++) {
    //     console.log(tagslesson[i])
    // }
    // var tagslessonh5 = document.getElementsByTagName('h5')
    // console.log( typeof tagslessonh5)
    // for (var i = 0; i < tagslessonh5.length; i++) {
    // 	console.log(tagslessonh5[i].childNodes[0].nodeValue)
    // 	var attri = tagslessonh5[i].attributes[0]
    // 	console.log(attri.nodeName+"|"+attri.nodeValue+"|"+attri.nodeType)
    // }
    //     var tagslessonh5 = document.getElementsByTagName('h5')
    // var messagearray = []
    // for (var i = 0; i < tagslessonh5.length; i++) {
    //     messagearray.push(tagslessonh5[i].childNodes[0].nodeValue)
    // }
    // console.log(messagearray.toString())
    // var tagslessonchapter = document.getElementsByClassName('chapter')
    // console.log(typeof tagslessonchapter)
    // for (var i = 0; i < tagslessonchapter.length; i++) {
    //     var item_title = tagslessonchapter[i].getElementsByClassName("chapter-title")
    //     for (var j = 0; j < item_title.length; j++) {
    //         console.log(item_title[j])
    //         var section_title = item_title[j].getElementsByClassName("section-number")
    //         for (var k = 0; k < section_title.length; k++) {
    //             console.log(section_title[k])
    //         }
    //     }
    // }
    // var section_title = document.getElementsByClassName("section-number")
    // for (var k = 0; k < section_title.length; k++) {
    // 	console.log(section_title[k])
    // }
    // var section_title = document.getElementsByClassName("section-number")
    // for (var k = 0; k < section_title.length; k++) {
    // 	console.log(section_title[k])
    // 	section_title[k].setAttribute('class','box section-number')
    // }

    // var tagslessonh5 = document.getElementsByClassName('chapter-title')
    // console.log( typeof tagslessonh5)
    // for (var i = 0; i < tagslessonh5.length; i++) {
    // 	console.log(tagslessonh5[i].childNodes)
    // 	console.log(tagslessonh5[i].childNodes[0])
    // 	console.log(tagslessonh5[i].firstChild)
    // 	console.log(tagslessonh5[i].lastChild)
    // 	console.log(tagslessonh5[i].parentNode)
    // 	console.log(tagslessonh5[i].nextSibling)
    // 	console.log(tagslessonh5[i].previousSibling)
    // 	console.log(tagslessonh5[i].childNodes[tagslessonh5[i].childNodes.length-1])
    // }
    // var tagslessonh5 = document.getElementsByClassName('chapter-title')
    // var titlearray = []
    // for (var i = 0; i < tagslessonh5.length; i++) {
    //     titlearray.push(tagslessonh5[i].childNodes[0].nodeValue)
    // }
    // for (var i = 0; i < titlearray.length; i++) {
    //     console.log(titlearray[i])
    // }

  //   var str = "第1章  HTML, " +
  //       "第2章  CSS, " +
  //       "第3章  小米商城实战项目, " +
  //       "第4章  JavaScript基础, " +
  //       "第5章  BOM, " +
  //       "第6章  DOM, " +
  //       "第7章  JS特效, " +
  //       "第8章  Jquery开发&BootStrap"
  //   var message = "1.1 导学视频,1.2 HTML的历史发展过程,1.3 搞懂HTML是什么,1.4 sublimeText的安装和使用,1.5 HTML的常用标签介绍和文档结构,1.6 学习p标签,为你的文章添加段落,1.7 学习strong和em加入强调语气,1.8 学习br标签,为你的内容添加换行,1.9 HTML的特殊符号,1.10 学习HX系列标题,为你的网页添加标题、,1.11 学习hr标签为你的段落之间添加分割线,1.12 学习ul标签为你的网页添加新闻列表,1.13 学习ol为网页添加热门点击排行榜,1.14 学习dl为你的网页添加无序列表,1.15 table标签的介绍和使用,1.16 简单的css样式为表格添加边框,1.17 学习caption为表格添加标题,1.18 表格的横向合并和纵向合并使用,1.19 学习a标签为你的网页添加超链接,1.20 在新的浏览器窗口打开新的链接,1.21 标签在当前网页上进行跳转,1.22 为你的爱人发送一封邮件,1.23 img标签为你的网页添加绚丽的图片,1.24 img标签src属性的路径问题,1.25 img标签的属性讲解,1.26 表单控件input的使用,1.27 将网页的数据提交到服务器,1.28 单选框实现性别选择,1.29 复选框购买你想要的课程,1.30 下拉列表实现单选,1.31 下拉列表实现多选,1.32 让你的文本输入框支持多行输入,1.33 form表单中的按钮和普通按钮,1.34 label标签的应用,1.35 div标签的介绍,1.36 小米官网和京东网站划分结构,1.37 对小米网站的整站分析,2.1 CSS的介绍,2.2 3分钟快速认识css,2.3 使用css的优势,2.4 css语法和注释规则,2.5 css的三种引入方式,2.6 三种引入方式的优缺点,2.7 三种引入方式的优先级,2.8 css的常用选择器介绍,2.9 css选择器之标签选择器,2.10 css选择器之ID选择器,2.11 css选择器之类选择器,2.12 如何正确的玩好类选择器,2.13 css选择器之后代选择器,2.14 css选择器之子代选择器,2.15 css选择器之组合选择器,2.16 css选择器之交集选择器,2.17 css选择器之伪类选择器,2.18 css选择器总结,2.19 css的继承性,2.20 css选择器权重,2.21 css选择器权重深入,2.22 !important的讲解,2.23 字体属性之font-family,2.24 字体属性之font-size,2.25 字体属性之color,2.26 字体属性之font-style,2.27 字体属性之font-weight,2.28 文本属性之text-decoration,2.29 制作淘宝满减女装示例效果,2.30 文本属性之text-indent,2.31 文本属性之行高,2.32 文本属性之text-align,2.33 字体属性和文本属性总结,2.34 元素分类和display属性介绍,2.35 块级元素特点,2.36 行内元素和行内块元素特点,2.37 display属性讲解,2.38 小米顶部栏案例,2.39 盒子模型介绍,2.40 盒子模型的属性介绍,2.41 padding属性讲解,2.42 border属性讲解,2.43 margin属性讲解,2.44 清除某些HTML元素的默认样式,2.45 HTML盒子居中显示,2.46 浮动的介绍,2.47 了解网页中的文字环绕现象,2.48 浮动元素的现象,2.49 浮动元素的破坏性,2.50 清除浮动方式(固定高度和内墙法),2.51 清除浮动的方式之伪元素清除法,2.52 清除浮动方式之overflow,2.53 深入挖掘BFC到底是什么鬼,2.54 小米导航栏制作,2.55 定位的介绍,2.56 相对定位讲解,2.57 绝对定位讲解,2.58 小米搜索实战应用,2.59 固定定位讲解,2.60 小米固定侧方栏案例讲解,2.61 浮动和定位对行内元素的影响,2.62 z-index的讲解,2.63 z-index属性深入挖掘,2.64 css的背景属性讲解,2.65 背景定位属性值详讲,2.66 MIUI背景图实战应用案例,2.67 CSS Sprite雪碧图技术,2.68 CSS Spriter雪碧图技术实现原理,2.69 如何快速的让背景图缩放比例,2.70 淘宝列表导航案例制作,2.71 如何制作圆、圆环以及半圆,2.72 使网页中的元素产生阴影的效果,2.73 网页常见布局方案-单列布局,2.74 网页常见布局方案-多列布局,2.75 网页中常见问题介绍,2.76 行内元素水平垂直居中,2.77 块级元素水平垂直居中方法一,2.78 块级元素水平垂直居中方法二,2.79 块级元素水平垂直居中方法三,3.1 小米商城介绍和结构分析,3.2 小米顶部栏结构搭建,3.3 小米顶部栏样式实现,3.4 小米导航栏结构搭建,3.5 小米导航栏样式实现,3.6 小米轮播图和侧边栏实现,3.7 小米侧边栏样式实现,3.8 小米轮播图下一张和上一张实现,3.9 小米向导内容结构搭建,3.10 iconfont阿里巴巴矢量图标库的使用,3.11 小米向导列表实现,3.12 小米中心banner图实现,3.13 小米内容详情结构搭建,3.14 小米内容详情样式实现,3.15 小米脚部区域结构搭建,3.16 小米脚部区域样式实现,3.17 小米商城项目总结经验,4.1 JavaScript介绍,4.2 如何在页面中插入Javascript,4.3 变量,4.4 基本的变量类型的介绍,4.5 算数运算符,4.6 赋值运算符,4.7 字符串,4.8 数值和字符串转换,4.9 JavaScript中强大的数组Array,4.10 人生的选择,4.11 为赢取白富美做出选择--条件判断,4.12 if...else语句,4.13 比较运算符,4.14 逻辑运算符,4.15 switch语句,4.16 三元运算符,4.17 for循环介绍和应用,4.18 个人对996的看法,4.19 break和continue语句,4.20 while循环,4.21 do-while循环,4.22 函数的定义,4.23 函数传参,4.24 函数返回值和函数表达式,4.25 函数作用域和全局污染,4.26 对象object讲解,4.27 内置对象Array,4.28 数组的join()方法,4.29 数组的栈方法和队列方法,4.30 数组排序,4.31 数组的操作方法,4.32 数组的位置方法,4.33 数组的迭代方法,4.34 map方法的应用,4.35 字符串的字符方法,4.36 字符串的切片方法,4.37 字符串其它的方法,4.38 如何查找当前字符的所有位置,4.39 Date日期对象的创建方式,4.40 Date的常用方法,4.41 日期格式化方法,4.42 如何显示数字时钟的格式时间,4.43 字符串和数值类型相互转换,4.44 global对象的编码和解码方法,4.45 window对象讲解,4.46 Math数学对象,4.47 获取某个范围的随机整数,4.48 如何来获取随机颜色,4.49 如何获取随机验证吗,4.50 作为面试官对目前开发人员的看法,5.1 BOM对象介绍,5.2 window对象的alert,confirm,prompt方法,5.3 定时器方法,5.4 location对象的常用属性介绍,5.5 如何访问每个查询字符串参数,5.6 当前浏览器的位置操作,5.7 如何检测当前浏览器上的插件,5.8 history对象的介绍,6.1 快速认识DOM,6.2 DOM中节点中分类,6.3 获取元素节点对象的方式,6.4 setAttribute()和getAttribute()用法,6.5 节点对象的三个重要属性介绍,6.6 节点对象的常用属性,6.7 节点对象属性在各浏览器兼容性处理,6.8 元素节点对象的增删改查方法,6.9 样式设置,6.10 事件介绍和onclick事件,6.11 鼠标悬浮事件,6.12 光标聚焦和失焦事件,6.13 表单控件上内容选中和改变事件,6.14 窗口加载事件,7.1 JS特效案例介绍,7.2 前女友们的图片切换,7.3 显示和隐藏图片,7.4 衣服相册切换效果,7.5 关闭小广告,7.6 初学者小白实现图片切换,7.7 封装图片切换代码,7.8 图片切换完整版,7.9 百度换肤,7.10 千千音乐盒实现全选和反选,7.11 表单验证,7.12 上传图片验证,7.13 随机验证码校验,7.14 发布评论,7.15 九宫格布局,7.16 九宫格布局定位实现,7.17 日期特效,7.18 定时器的回顾,7.19 transform的应用,7.20 数字时钟案例,7.21 长图滚动案例,8.1 jQuery知识点介绍,8.2 基础核心使用,8.3 入口函数,8.4 如何处理多个库$冲突的问题,8.5 基础和层级选择器,8.6 过滤选择器和属性选择器,8.7 DOM操作之插入节点,8.8 DOM操作之删除节点,8.9 DOM操作之克隆节点,8.10 DOM操作之替换节点和包裹节点,8.11 属性操作,8.12 类操作,8.13 值操作,8.14 筛选的方法,8.15 siblings方法的运用,8.16 css的DOM方法,8.17 宽高设置和获取,8.18 鼠标事件一,8.19 鼠标事件二,8.20 鼠标事件三,8.21 表单事件,8.22 冒泡应用(百度换肤),8.23 事件代理,8.24 合成事件,8.25 动画效果,8.26 如何与后端发生交互(ajax技术),8.27 案例-百度天气实现实况天气,8.28 案例-百度天气实现未来三天天气,8.29 案例todoList-加载初始数据,8.30 案例todoList-添加数据,8.31 案例todoList-删除数据,8.32 案例todoList-添加已经完成选项,8.33 案例todoList-编辑操作,8.34 案例todoList-如何做数据的持久化,8.35 响应式介绍,8.36 @media媒体查询,8.37 Bootstrap介绍,8.38 Bootstrap的下载和基本使用,8.39 Bootstrap的布局容器,8.40 Bootstrap的栅格系统,8.41 Bootstrap栅格的实现原理,8.42 Bootstrap的列偏移,8.43 Bootstrap的排版,8.44 Bootstrap的表格,8.45 Bootstrap的表单,8.46 全局CSS样式,8.47 导航条,8.48 面板和下拉菜单,8.49 按钮组和按钮式的下拉菜单,8.50 分页、路径导航、徽章,8.51 警告框和进度条,8.52 Bootstrap的插件,8.53 个人经历分享"

  //   var messagearray = message.split(',');
  //   var arraytest = str.split(',');
  //   console.log(messagearray)
  //   var bodytest = document.getElementById('test');
  //   var ultest = document.createElement("ul");
  //   var litest = document.createElement("li");
  //   var isBlue = true
  //    litest.onclick = function (){
  //       alert("fsdhjksad")
	 // }
  //   for (var i = 0; i < arraytest.length; i++) {
  //       //li标签
  //       var litest = document.createElement("li");
  //       litest.style.color = 'red'
  //       litest.setAttribute('class', 'test_setstyle')
  //       //文本信息
  //       var texttitle = document.createTextNode(arraytest[i])
  //       //通过控制属性的类名来控制样式

  //       //为li添加文本
  //       litest.appendChild(texttitle);
  //       //添加li
  //       ultest.appendChild(litest);
  //   }
  //   bodytest.appendChild(ultest);
	console.log($('ul li:first').text())
	console.log($('ul li:first').constructor(1))
	// console.log($('ul li:first').text())

</script>
</body>
</html>